<script lang="ts">
	import { getFormField } from "formsnap";
	import type { Checkbox as CheckboxPrimitive } from "bits-ui";
	import { Checkbox } from "$lib/components/ui/checkbox";
	type $$Props = CheckboxPrimitive.Props;
	type $$Events = CheckboxPrimitive.Events;

	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;

	const { name, setValue, attrStore, value } = getFormField();
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	const { name: nameAttr, value: valueAttr, ...rest } = $attrStore;
</script>

<Checkbox
	{...rest}
	checked={typeof $value === "boolean" ? $value : false}
	onCheckedChange={(v) => {
		onCheckedChange?.(v);
		setValue(v);
	}}
	{...$$restProps}
	on:click
	on:keydown
/>
<input hidden {name} value={$value} />
